<template>
  <section id="dynamic_info">
      <div class="dynamic-title">{{value.title || ' '}}</div>
      <slot name="author"></slot>
      <div class="dynamic-content" v-html="contentFilter(value.content)"></div>
  </section>
</template>
<script>
import emojiService from "services/common/emoji";

/**
 * 给请求来的富文本添加样式
 * @param {*} styles 要添加的css 样式
 * @param {*} styleId 唯一标识 防止重复创建
 */
function includeStyleElement(styles, styleId) {
 
  if (document.getElementById(styleId)) {
      return
  }
  var style = document.createElement("style");
  style.id = styleId;
  (document.getElementsByTagName("head")[0] || document.body).appendChild(style);
  if (style.styleSheet) { 
      style.styleSheet.cssText = styles;
  } else {
      style.appendChild(document.createTextNode(styles));
  }
}


export default {
  name: "dynamic_info",
  components: {
    
  },
  data() {
    return {};
  },
  props: {
    value: {}
  },
  methods: {
    contentFilter(content) {
      // test
      // content = "[:D]123[<//>]123awedasdasd";
      if (content) {
      let _host = this.$.host
      let vm = this
      content = content.split('src="/upload').join('src="'+_host+'/upload')
      // content = content.split('src="http://').join('style="width:94%; margin:5px 3%;" src="http://')
      // content = content.split('src="/upload').join('style="width:94%; margin:5px 3%;" src="'+_host+'/upload')

        for (let key in emojiService.EMOJI_MAP) {
          while (content.indexOf(key) !== -1) {
            content = content.replace(key, function() {
              let src = emojiService.getEmojiSrc(key);
              return `<img class="emoji" src="${src}">`;
            });
          }
        }
      let indexStart = 0 // 记录查找位置
		let indexEnd = 0
		let flag = true
		let oldTopicTitle = []
		// while(flag){
		// 	if(content.indexOf('#',indexEnd+1) == -1){
		// 		// console.log('indexStart: '+ indexStart)
		// 		// console.log('indexEnd: '+ indexEnd)
		// 		flag = false
		// 	}else{
				indexStart= content.indexOf('#',indexStart)
				indexEnd = content.indexOf('#',indexStart+1)
				console.log('indexEnd: '+ indexEnd)
				let topicTitle = content.slice(indexStart,indexEnd + 1) || ''
				// if(oldTopicTitle.indexOf(topicTitle)=== -1){
        // 	oldTopicTitle.push(topicTitle)
        console.log(vm.value.topics)
        vm.value.topics&&vm.value.topics.forEach(res=>{
          if((`#${res.content}#`) === topicTitle){
					content = content.split(topicTitle).join(`<span class="topicTitle">${topicTitle}</span>`)
          }
        })
					// flag = false
					
				// }
			// 	}
				
			// }
      
			
		}
      this.$nextTick(()=>{
        let imgstyle = "#dynamic_info .dynamic-content img{width: 94%;margin: 5px 3%;}"
        let emojistyle = "#dynamic_info .dynamic-content img.emoji{width: 22px;vertical-align: middle;margin: 0 2px;}"
        let titlestyle = "#dynamic_info .dynamic-content .topicTitle{color:#1f99e4}"
        includeStyleElement(imgstyle, "imgstyle");
        includeStyleElement(emojistyle, "emojistyle");
			  includeStyleElement(titlestyle, "titlestyle");
      })
      return content;
    }
  }
};
</script>
<style lang="scss" scoped>
#dynamic_info {
  .dynamic-title {
    font-size: 16px;
    font-weight: 900;
    text-align: left;
    padding:1em;
  }
  .dynamic-content {
    padding: 0 1em;
    
    line-height: 16px;
    width: 100%;
    p{
      color: red;
    }
  }
  .dynamic-content img{
    width: 94%;
  }
}
</style>


